<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格展示页面</title>
		<!-- css样式-->
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<!-- js文件-->
		<script src="../../js/tableJson.js"></script>
		<script language="javascript" type="text/javascript" src="../../layui/layui.js"></script>


		<script>
			layui.use(['layer', 'table'], function() {
				var layer = layui.layer, //弹层
					table = layui.table; //表格
				//向世界问个好
				layer.msg('Hello World');

				//执行一个 table 实例
				table.render({
					elem: '#demo',
					height: 620,
					//url: '../../DomeData/TableData.json', //数据接口		
					data:tableJson,
					title: '用户表',
					id:"id",
					page: true, //开启分页
					toolbar: '#toolbarDemo', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
					totalRow: true, //开启合计行		
					limit: 10,
					cols: [[ 
							{
								type: 'radio',
								 fixed: 'left',
						    },
							//表头
							{
								field: 'id',
								title: 'ID',
								width: 80,
								sort: true,
								fixed: 'left'
							}, {
								field: 'username',
								title: '用户名',
								width: 80
							}, {
								field: 'sex',
								title: '性别',
								width: 80,
								sort: true
							}, {
								field: 'city',
								title: '城市',
								width: 80
							}, {
								field: 'sign',
								title: '签名',
								width: 177
							}, {
								field: 'experience',
								title: '积分',
								width: 80,
								sort: true
							}, {
								field: 'score',
								title: '评分',
								width: 80,
								sort: true
							}, {
								field: 'classify',
								title: '职业',
								width: 80
							}, {
								field: 'wealth',
								title: '财富',
								width: 135,
								sort: true
							},
						]
					]
				});

				//监听事件
				table.on('toolbar(test)', function(obj) {
					console.log("点击事件")
					var checkStatus = table.checkStatus(obj.config.id);
					//var checkStatus = table.checkStatus('idtest');
					console.log(checkStatus.data);
					switch (obj.event) {
						case 'add':
							layer.msg('添加');
							break;
						case 'delete':
							layer.msg('删除');
							break;
						case 'update':
						
							layer.alert('编辑:选中的行id:'+checkStatus.data[0].id);
							break;
					};
				});
			});
		</script>

		<!-- 工具栏模板： -->
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
            </div>
         </script>

	</head>
	<body>
		<table class="layui-hide" id="demo" lay-filter="test"></table>
	</body>
</html>
